<template>
    <div>
        <el-from>
            <el-form-item>
                <el-button type="primary" @click="addHandler">新增</el-button>
                <el-button type="warning" @click="exportHandler">导出</el-button>
            </el-form-item>
        </el-from>
        <el-table :data="tableData">
            <el-table-column type="index" width="60" label="序号" />
            <el-table-column prop="id" label="ID" />
            <el-table-column prop="name" label="文章类别" />
            <el-table-column prop="alias" label="文章类别别名" />
            <el-table-column label="操作">
                <template #default="{ row }">
                    <el-button type="primary" @click="editHandler(row)">编辑</el-button>
                    <el-button type="danger" @click="delHandler(row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog v-model="dialog.show" width="480px" :title="dialog.title">
            <el-form label-width="120px">
                <el-form-item label="文章类别">
                    <el-input v-model="dialog.form.name" />
                </el-form-item>
                <el-form-item label="文章类别别名">
                    <el-input v-model="dialog.form.alias" />
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button type="text" @click="dialog.show = false">取消</el-button>
                <el-button type="primary" @click="submitHandler">确定</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
    import {
        ref,
        onMounted
    } from 'vue'
    import {
        articleCateList,
        articleCateAdd,
        articleCateUpdate,
        articleCateDel
    } from '@/api'
    import {
        ElMessage
    } from 'element-plus'
    import {
        xlsExport
    } from '@/utils'

    const tableData = ref([])
    let getPage = async _ => {
        let r = await articleCateList()
        tableData.value = r.data
    }
    getPage()
    let dialog = ref({
        show: false,
        title: '',
        form: {}
    })
    let addHandler = _ => {
        dialog.value = {
            show: true,
            title: '新增',
            form: {}
        }
    }
    let submitHandler = async _ => {
        let f = dialog.value.form
        let r = f.id ? await articleCateUpdate(f) : await articleCateAdd(f)
        ElMessage.success(r.msg)
        getPage()
        dialog.value.show = false
    }
    let editHandler = row => {
        dialog.value = {
            show: true,
            title: '编辑',
            form: JSON.parse(JSON.stringify(row))
        }
    }
    let delHandler = async row => {
        let r = await articleCateDel(row)
        ElMessage.success(r.msg)
        getPage()
    }
    let exportHandler = _ => {
        xlsExport({
            header: ['ID', '文章类别', '文章类别别名'],
            props: ['id', 'name', 'alias'],
            sourceData: tableData.value,
            fileName: '文章类别'
        })
    }
</script>